<template>
  <!-- 精选题库 -->
  <div class="container">
    <el-card class="box-card">
      <!-- 新增试题  跳转到试题录入 -->
      <el-row type="flex" justify="end">
        <el-col :span="2" class="btn">
          <!-- 跳转到试题录入 -->
          <el-button
            icon="el-icon-edit"
            type="success"
            size="mini"
            @click="$router.push('new')"
            >新增试题
          </el-button>
        </el-col>
      </el-row>
      <!-- 筛选区域 -->
      <div class="saixuan">
        <el-form
          ref="form"
          :model="formData"
          label-width="80px"
          class="saixuan-from"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  placeholder="请选择"
                  v-model="formData.subjectID"
                  @focus="simple"
                  @change="detail"
                >
                  <el-option
                    v-for="items in subjectlist"
                    :label="items.label"
                    :value="items.value"
                    :key="items.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="试题类型">
                <el-select placeholder="请选择" v-model="formData.questionType">
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                  <el-option label="简单" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="题目备注">
                <el-input v-model="formData.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  placeholder="请选择"
                  v-model="formData.catalogID"
                  @focus="detail"
                >
                  <el-option
                    v-for="items in mululist"
                    :label="items.directoryName"
                    :value="items.id"
                    :key="items.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度">
                <el-select placeholder="请选择" v-model="formData.difficulty">
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="一般" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="企业简称">
                <el-input v-model="formData.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  placeholder="请选择"
                  v-model="formData.tags"
                  @focus="biaoqian1"
                >
                  <el-option
                    v-for="items in biaoqian"
                    :label="items.label"
                    :value="items.value"
                    :key="items.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="方向">
                <el-select placeholder="请选择" v-model="formData.direction">
                  <el-option label="o2o" value="o2o"></el-option>
                  <el-option label="外包服务" value="2o"></el-option>
                  <el-option label="企业服务" value="o2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市">
                <el-row type="flex">
                  <el-select
                    v-model="formData.city"
                    size="mini"
                    @focus="City"
                    @change="Cityy"
                  >
                    <el-option
                      v-for="(items, index) in city"
                      :label="items"
                      :value="items"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="formData.province"
                    size="mini"
                    @focus="Cityy"
                  >
                    <el-option
                      v-for="(items, index) in city2"
                      :label="items"
                      :value="items"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="formData.keyword"></el-input>
              </el-form-item>
              <el-form-item label="录入人">
                <el-select
                  placeholder="请选择"
                  v-model="formData.creatorID"
                  @focus="users"
                >
                  <el-option
                    v-for="items in user"
                    :label="items.username"
                    :value="items.id"
                    :key="items.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-col :span="24">
                  <el-row type="flex" justify="end">
                    <el-button size="mini" @click="delxinxi">清除</el-button>
                    <el-button type="primary" size="mini" @click="sousuo"
                      >搜索</el-button
                    >
                  </el-row>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- tabs区域 -->
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <el-col :span="24">
              <i class="el-icon-info" />
              <span>共{{ counts }}条</span>
            </el-col>
            <template>
              <el-table :data="tableData">
                <el-table-column prop="number" label="试题编号" width="200px">
                </el-table-column>
                <el-table-column prop="subject" label="学科"> </el-table-column>
                <el-table-column prop="catalog" label="目录"> </el-table-column>
                <el-table-column
                  prop="questionType"
                  :formatter="qTypew"
                  label="题型"
                >
                </el-table-column>
                <el-table-column prop="question" label="题干" width="200px">
                  <template slot-scope="scope">
                    <div v-html="scope.row.question"></div>
                  </template>
                </el-table-column>
                <el-table-column prop="addDate" label="录入时间" width="180px">
                </el-table-column>
                <el-table-column
                  prop="difficulty"
                  :formatter="difficw"
                  label="难度"
                >
                </el-table-column>
                <el-table-column prop="creator" label="录入人">
                </el-table-column>
                <el-table-column
                  prop="chkState"
                  :formatter="chkstate"
                  label="审核状态"
                >
                </el-table-column>
                <el-table-column prop="chkRemarks" label="审核意见">
                </el-table-column>
                <el-table-column prop="chkUser" label="审核人">
                </el-table-column>
                <!-- 待发布（待审核，已拒绝）已发布（通过，上架） -->
                <el-table-column
                  prop="chkState"
                  :formatter="pubState"
                  label="发布状态"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200px">
                  <template slot-scope="scope">
                    <el-button
                      @click="previewFn(scope.row.id)"
                      type="text"
                      size="small"
                      >预览</el-button
                    >
                    <el-button type="text" size="small">审核</el-button>
                    <el-button type="text" size="small">修改</el-button>
                    <el-button type="text" size="small">
                      {{ scope.row.chkState === 1 ? "下架" : "上架" }}
                    </el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="second"
            ><el-col :span="24">
              <i class="el-icon-info" />
              <span>共{{ counts }}条</span>
            </el-col>
            <template>
              <el-table :data="tableData">
                <el-table-column prop="number" label="试题编号" width="200px">
                </el-table-column>
                <el-table-column prop="subject" label="学科"> </el-table-column>
                <el-table-column prop="catalog" label="目录"> </el-table-column>
                <el-table-column
                  prop="questionType"
                  :formatter="qTypew"
                  label="题型"
                >
                </el-table-column>
                <el-table-column prop="question" label="题干" width="200px">
                  <template slot-scope="scope">
                    <div v-html="scope.row.question"></div>
                  </template>
                </el-table-column>
                <el-table-column prop="addDate" label="录入时间" width="180px">
                </el-table-column>
                <el-table-column
                  prop="difficulty"
                  :formatter="difficw"
                  label="难度"
                >
                </el-table-column>
                <el-table-column prop="creator" label="录入人">
                </el-table-column>
                <el-table-column
                  prop="chkState"
                  :formatter="chkstate"
                  label="审核状态"
                >
                </el-table-column>
                <el-table-column prop="chkRemarks" label="审核意见">
                </el-table-column>
                <el-table-column prop="chkUser" label="审核人">
                </el-table-column>
                <!-- 待发布（待审核，已拒绝）已发布（通过，上架） -->
                <el-table-column
                  prop="chkState"
                  :formatter="pubState"
                  label="发布状态"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200px">
                  <template slot-scope="scope">
                    <el-button
                      @click="previewFn(scope.row.id)"
                      type="text"
                      size="small"
                      >预览</el-button
                    >
                    <el-button type="text" size="small">审核</el-button>
                    <el-button type="text" size="small">修改</el-button>
                    <el-button
                      type="text"
                      @click.native="up = true"
                      size="small"
                    >
                      {{ scope.row.chkState === 1 ? "下架" : "上架" }}
                    </el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <el-tab-pane label="已审核" name="third">已审核</el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth">已拒绝</el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <QuestionsPreview
      v-if="questionsPreview"
      :dialogFormVisible.sync="questionsPreview"
      :id="questionsPreviewId"
    />
    <!-- 上架下架弹窗显示 -->
    <el-dialog title="提示" :visible.sync="up" width="30%" center>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="up = false">取 消</el-button>
        <el-button type="primary" @click="up = false"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/directorys.js'
import { list as users } from '@/api/base/users.js'
import { simple as simple1 } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  name: 'Choice',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      questionsPreview: false, // 预览显示弹窗
      questionsPreviewId: '',
      activeName: 'first', // tabs默认显示--全部
      // 获取的学科列表
      subjectlist: '',
      // 获取的二级目录下拉列表
      mululist: [],
      // 标签
      biaoqian: '',
      city: '', // 省份
      city2: '', // 省份里面的地区
      user: '', // 录入人
      // 搜索表单数据
      formData: {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: ''// 目录
      },
      // 精选题库列表
      tableData: [],
      obj: {},
      up: false, // 上架下架弹窗显示
      counts: 0 // 总数
    }
  },
  methods: {
    // 搜索按钮
    async sousuo () {
      // 去除空搜索选项
      Object.keys(this.formData).forEach(item => {
        if (this.formData[item] !== '') {
          this.obj[item] = this.formData[item]
        }
      })
      // 传入条件发请求
      if (this.obj === {}) {
        this.questionsChoice()
      } else {
        const { data } = await choice(this.obj)
        this.tableData = data.items
        this.counts = data.counts
        this.obj = {}
      }
    },
    btnup () { // 上架下架
      console.log(111)
      this.up = true
    },
    previewFn () {
      this.questionsPreview = true
    },
    // 试题类型转化
    qTypew (row) {
      if (row.questionType === '1') {
        return '单选1'
      } else if (row.questionType === '2') {
        return '多选2'
      } else if (row.questionType === '3') {
        return '简单3'
      }
    },
    difficw (row) { // 试题难度
      return row.difficulty === '1' ? '简单1' : (row.difficulty === '2' ? '一般2' : '困难3')
    },
    chkstate (row) { // 审核状态
      return row.chkState === 0 ? '待审核0' : (row.chkState === 1 ? '通过1' : '拒绝2')
    },
    pubState (row) { // 发布状态
      if (row.chkState === 0 || row.chkState === 2) {
        return '待发布0,2'
      } else if (row.chkState === 1) {
        return '已发布1'
      }
    },
    handleClick (tab, event) {
      console.log('e', event)
      console.log('tab', tab.label) // 待审核
    },
    // 精选题库列表请求
    async questionsChoice () {
      const { data } = await choice()
      console.log(data)
      this.tableData = data.items
      this.counts = data.counts
      console.log('qingqi', await choice())
    },
    // 获取学科简单列表
    async simple () {
      const { data } = await simple()
      this.subjectlist = data
      console.log('学科列表', await simple1())
    },
    // 获取二级目录列表
    async detail () {
      this.mululist = []
      this.formData.catalogID = ''
      const { data } = await await list()
      data.items.forEach(item1 => {
        if (item1.subjectID === this.formData.subjectID) {
          this.mululist.push(item1)
        }
      })
    },
    async biaoqian1 () { // 获取标签
      const { data } = await simple1()
      this.biaoqian = data
    },
    async users () { // 录入人
      const { data } = await users()
      this.user = data.list
    },
    City () { // 城市
      this.city = provinces()
    },
    Cityy () { // 城市
      this.formData.province = ''
      this.city2 = citys(this.formData.city)
    },
    delxinxi () { // 点击清除按钮清空表单
      this.formData = {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: ''// 目录
      }
    }
  },
  created () {
    this.questionsChoice() // 初始化的时候请求精选数据列表
  }
}
</script>

<style scoped lang='scss'>
.container {
  .box-card {
    .btn {
      // margin-right: 35px;
      margin-bottom: 9px;
    }

    .saixuan {
      // 筛选区域
      .saixuan-from {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        flex-direction: row;
      }
    }
  }
}
</style>
